CSS是Cascading Style Sheet（层叠样式化表单）的简称，是一种格式化网页的语言，它专门用于网页的样式设置，使网页内容和样式分开。

了解CSS

CSS的基本语法格式如下：

1
H3{color:red}

其格式分两部分，选择器（selector）和样式规则（rule），在上面这行代码中，H3为选择器，{}的内容为样式规则，样式规则用于设置样式内容，选择器用来指定哪些HTML元素采用样式规则，如上面的代码中，指定所有<H3>标签中的内容都显示为红色，如果有多个样式规则，中间用”;”隔开。

1
H3{font-family:Arial; text-align:center; color:red}

为了增强可读性，可以将上面的代码分行显示：

1
2
3
4
5
H3 {
    font-family:Arial;
    text-align:center;
    color:red
}

如果要为一个属性赋多个值，中间使用”,”分隔：

1
2
3
4
5
H3 {
    font-family:Arial, scans-serif;
    text-align:center;
    color:red
}

上面的font-family属性提供了两个字体，浏览器会依次选择，直到遇见可识别的字体为止。

在Style属性中定义样式

最简单的CSS使用方法就是直接设置HTML元素的style属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
    <head>
      	<title>css</title>
    </head>
    <body style="background-color: '#0000FF'">
        <a href="www.baidu.com" style="color: red; font-size: 40px">
            www.baidu.com
        </a>    
        <h3 style="font-size: 50px">
          	1234
        </h3>
    </body>
</html>

这种方式将HTML代码和CSS代码耦合在一起，不推荐。

在HTML中定义样式

在HTML中通过<style>标签可以将HTML元素中的样式提炼出来，并且可以通过三种方式指定哪些HTML元素可以使用这些样式。

  • 指定HTML元素的id
  • 指定HTML元素的class属性
  • 指定HTML元素的标签名

在选择器前面加“井号”（#）表示这个选择器就是一个id属性值，任何一个HTML元素，只要它的id属性值为选择器名，就会应用这个样式：

1
2
3
#link {
  	color:red
}

如果一个<a>标签的id属性值为link，那么这个<a>标签就会应用link样式：

1
<a href="www.baidu.com" id="link">www.baidu.com</a>

在选择器前面加实心点（.）表示这个选择器的名可以放在HTML元素的class属性中：

1
.bg{background-color: '#0000FF'};

当<body>标签的class属性值为bg时，会自动应用bg样式：

1
2
3
<body class="bg">
  ...
</body>

当选择器名正好是一个HTML元素名的话，所有对应的HTML原色都会应用这个样式：

1
h3{font-size: 50px}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
    <head>
        <title>css</title>
        <style type="text/css">
            .bg{background-color: '#0000FF'};
            h3{font-size: 50px}
            #link{color: red;font-size: 40px}
        </style>
    </head>
    <body class="bg">
        <a href="www.baidu.com" id="link">www.baidu.com</a>
        <h3>
          	1234
        </h3>
    </body>
</html>

在外部文件中定义样式

CSS标准中允许将样式单独写在一个单独的css文件中，然后通过<link>标签引用这个文件，从而达到多个HTML页面共享样式的目的。

1
2
3
4
5
6
7
8
9
10
11
12
<html>
    <head>
        <title>css</title>
        <link type="text/css" rel="stylesheet" href="style.css"/>
    </head>
    <body class="bg">
        <a href="www.baidu.com" id="link">www.baidu.com</a>
        <h3>
          	1234
        </h3>
    </body>
</html>

实现样式的继承

所谓继承，就是如果HTML元素还未设置某些样式，但是其父元素中设置了，在子元素中就会继承父元素中的样式：

1
2
3
4
5
<h3 style="font-size: 50px">
    <a href="www.baidu.com" style="color: red">
     	www.baidu.com
    </a>
</h3>

在上面的代码中，<a>标签未设置font-size样式，而其父元素<h3>设置了font-size样式，因此<a>也会应用font-size样式。